<template>
   <div>
       <div class="container">
         <div class="handle-box">
            <el-input class="handle-input" v-model="form.name" placeholder="专业名称"/>
            <!-- <el-input class="handle-input" v-model="form.c_name" placeholder="班级名称"/> -->
               <el-input class="handle-input" v-model="form.org" placeholder="所属机构">
                   <template #append>
                       <el-select v-model="form.org" style="width: 44px;" :suffix-icon="CaretBottom">
                       <el-option
                           v-for="item in options.organizations"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                           />
            </el-select>
                   </template>
               </el-input>
               <el-input class="handle-input" v-model="form.branch" placeholder="所属分支">
                   <template #append>
                       <el-select v-model="form.branch" style="width: 44px;" :suffix-icon="CaretBottom">
                           <el-option
                           v-for="item in options.branch"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                           />
                       </el-select>
               </template>
                   </el-input>
               <el-input class="handle-input" v-model="form.field" placeholder="专业方向">   
                   <template #append>          
                       <el-select  v-model="form.field" style="width: 44px;" :suffix-icon="CaretBottom">
                           <el-option
                           v-for="item in options.branch"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                           />
                       </el-select>
               </template>   
            </el-input>
               <el-input class="handle-input" v-model="form.clazz" placeholder="班级">   
                   <template #append>          
                       <el-select  v-model="form.clazz" style="width: 44px;" :suffix-icon="CaretBottom">
                           <el-option
                           v-for="item in options.classes"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                           />
                       </el-select>
               </template>   
            </el-input>
               <el-input class="handle-input" v-model="form.clazz" placeholder="相关课程">   
                   <template #append>          
                       <el-select  v-model="form.clazz" style="width: 44px;" :suffix-icon="CaretBottom">
                           <el-option
                           v-for="item in options.courses"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                           />
                       </el-select>
               </template>   
            </el-input>
            <el-button color="#0ab394" class="handle-btn"  @click="handleSearch">查询</el-button>
            <el-row class="top-btn">
                     <el-button color="#e35148" @click="handleAllDelete">删除</el-button>                         
            </el-row>
         </div>
            <el-table ref="multipleTableRef" 
               :header-cell-style="{color:'#2A62BC'}"
                :data="tableData"   
                style="width: 100%;" 
               size="small"
               border
               @selection-change="handleSelectionChange">
               <el-table-column   type="selection" width="35" />
               <el-table-column  prop="name" label="班级"  ></el-table-column>
               <el-table-column prop="field" label="专业方向"></el-table-column>
               <el-table-column prop="org" label="所属机构"></el-table-column>
               <el-table-column prop="branch" label="所属分支"></el-table-column>
               <el-table-column prop="clazz" label="相关课程"></el-table-column>
               <el-table-column prop="time" label="提问时间"></el-table-column>
               <el-table-column prop="quest" label="提问人"></el-table-column>
               <el-table-column label="操作" width="200" align="center" >
                  <template #default="scope">
                     <el-row class="right-btn">
                         <el-button color="#0ab394"  @click="open(scope.$index,scope.row)" >
                           <i class="iconfont icon-list2 white"></i>详情
                        </el-button>
                           <el-button color="#e35148" :icon="Delete"  @click="handleDelete(scope.$index)">删除</el-button>
                     </el-row>
                     <!-- </el-button-group> -->
                  </template>
               </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
               <el-pagination
               :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :page-sizes="[5, 10, 15, 20]"
                  size="small"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageTotal"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"/>
            </div>
      </div>
   
         <!-- 修改/添加弹出框 -->
         <el-dialog  title="解答" v-model="editVisible" width="30%" >
            <template #header>
               <div class="div-title">
                <span  class="c">解答</span>
               </div>
            </template>
            <!-- <el-button type="primary" @click="loading=!loading"></el-button> -->
            <el-card class="box-card" :body-style= "{ padding:'0px'}">
                  <template #header>
                     <div class="card-header">
                     <el-avatar :size="60" :src="circleUrl" />
                     <span style="margin-left: 10px; font-size: 21px; color: #676A6C;">李小冉</span>
                     <div style=" float: right;;font-size:10px ;padding: 3px 8px;background-color: #D1DADE;margin-right: 0px;" 
                     >2012-12-25 15:32:52</div>
                     </div>
                  </template>
            <div  class="text item">平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。</div>
                  <!-- <template #footer>Footer content</template> -->
         </el-card>
         <div class="div-title">
                <span  class="c">全部回答</span>
               </div>
            <!-- <el-divider direction="horizontal"  /> -->
            <el-card class="box-card" :body-style= "{ padding:'0px'}">
                  <template #header>
                     <div class="card-header">
                     <el-avatar :size="60" :src="circleUrl" />
                     <span style="margin-left: 10px; font-size: 21px; color: #676A6C;">admin</span>
                     <div style=" float: right;;font-size:10px ;padding: 3px 8px;background-color: #D1DADE;margin-right: 0px;" 
                     >2012-12-25 15:32:52</div>
                     </div>
                  </template>
            <div  class="text item">对平面设计有独到的见解。</div>
                  <!-- <template #footer>Footer content</template> -->
         </el-card>
         <div class="div-title">
                <span  class="c">我要回答</span>
            </div>
         <!-- <el-divider direction="horizontal"  /> -->
         <Editor v-model:model-value="questA"></Editor>
             <template #footer>
               <span class="dialog-footer">
                  <el-button color="#0ab394" @click="editVisible = false">关闭</el-button>
                  <el-button color="#0ab394" @click="saveEdit">确 定</el-button>
               </span>
            </template>
         </el-dialog>
       
   
         <!-- </div> -->
      </div>
   </template>
   
   <script setup >
   import { ref, reactive ,toRefs,onMounted} from 'vue';
   import { ElMessage, ElMessageBox } from 'element-plus';
   import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
   import { getQuestions } from '../../api/clazz' ;
   import Editor from '../../components/WEditor.vue'


   const state1 = reactive({
         circleUrl:  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
   })
const { circleUrl } = toRefs(state1)
let form = reactive({
       id:'',
       name:'',
       field:'',
       org:'',
       branch:'',
       clazz:''
   });

   const options = reactive({
    organizations:[
      {
         value: '天龙八部',
         label: '天龙八部',
        },
     {
       value: '神雕侠侣',
       label: '神雕侠侣',
     },
     {
       value: '仙剑奇侠传',
       label: '仙剑奇侠传',
     },
     {
       value: 'flyme',
       label: 'flyme',
     },
     ],
     branch:[{
       value: '英语',
       label: '英语',
        },
     {
       value: '书法',
       label: '书法',
     },
     {
       value: '钢琴',
       label: '钢琴',
     },
     {
       value: 'flyme',
       label: 'flyme',
     },],
     
     dirs:[{
       value: '英语',
       label: '英语',
        },
     {
       value: '书法',
       label: '书法',
     },
     {
       value: '钢琴',
       label: '钢琴',
     },
     {
       value: 'flyme',
       label: 'flyme',
     },],
     classes:[
      {
         value: 'JAVA',
         label: 'JAVA',
         },
      {
         value: 'Android',
         label: 'Android',
      },
      {
         value: 'mysql',
         label: 'mysql',
      },
     ],
     courses:[{
       value: 'JAVA',
       label: 'JAVA',
        },
     {
       value: 'Android',
       label: 'Android',
     },
     {
       value: 'mysql',
       label: 'mysql',
     },],
     
   }
   )
      
   //分页字体
   const small = ref(true)
   // const size = ref<'default' | 'large' | 'small'>('default')
   
   //分页数据
   const query = reactive({
      pageIndex: 1,
      pageSize: 5,
   });
   //
   
   //表格数据
   const tableData = ref();
   //总页数
   const pageTotal = ref(0);
   const multipleTableRef = ref()
   const state = reactive({
      multipleSelection:[]
   })
   
   // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
   const getData = () => {
       getQuestions({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
           console.log(res,"---res---")
           // tableData.value = res.data.
         let start  = (query.pageIndex-1)*query.pageSize;//开始位置
           let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
           tableData.value = res.data.slice(start,end);
           // tableData.value = res.data;
           pageTotal.value = res.data.length
       })
   };
   getData();
   //多选框权限
   const handleSelectionChange = (val) => {
     state.multipleSelection = val
   }
   // 分页导航
   const handleSizeChange = (val) => {
     // console.log(`${val} items per page`)
     query.pageSize = val;
     getData()
   }
   const handlePageChange = (val) => {
      query.pageIndex = val;
      console.log(val,"==")
      console.log(query.pageSize)
      getData()
   };
   
   
   //是够启用调用后台接口
   const  changeSwitch=(status)=>{
       //调用后台修改接口
       console.log(status,'>>>status');
   }
   
   // 删除单个操作
   const handleDelete = (index) => {
      // 二次确认删除
      ElMessageBox.confirm('确定要删除吗？', '提示', {
         type: 'warning'
      })
      .then(() => {
         ElMessage.success('删除成功');
         //to 传递id 到后台 
         tableData.value.splice(index, 1);
         // 删除成功后
         // getData()
      })
      .catch(() => {});
   };
   //删除多个数据  to......
   const handleAllDelete =()=>{
      // console.log('删除多个')
      console.log(state.multipleSelection,'===拿到所有选择的数据====')
      if (state.multipleSelection.length==0) {
         ElMessage.error('请选择项')
         return
        }
      // console.log(state.multipleSelection.map(item=>item.id))
      //axios删除的操作
      // deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})
   
      
   }
   
   
   // 查询操作  to... 需要自己实现与后台交互
   const handleSearch = () => {
      query.pageIndex = 1;
      getData();
   };
   
   // 表格编辑时弹窗和保存
   const editVisible = ref(false);

   // 
   const open  = (index,row)=>{//
     editVisible.value = true
   }
   
   //保存添加或者修改的数据 ---需要重新实现
   const  questA = ref()
   const saveEdit = () => {
      editVisible.value = false;
     
   };
   
   
   
   </script >
   <style lang="less" scoped>
   .handle-box {
      margin-bottom: 20px;   
      // .handle-btn{
      //    margin-left: 8px;
      // }    
   }
   .handle-input {
      width:150px;
       margin-right: 8px;
   }
   .label{
      display: inline-block;
      max-width:100%;
      margin: 5px;
      font-weight: 700; 
   }
   .table {
      width: 100%;
      font-size: 14px;
   }
   .red {
      color: #F56C6C;
   }
   .blue {
      color: #1296e2;
      font-weight: bold;
   }
   .mr10 {
      margin-right: 10px;
   }
   .table-td-thumb {
      display: block;
      margin: auto;
      width: 40px;
      height: 40px;
   }
   .cell{
       display: inline-block;
       .el-button{
           margin-left: 0px;
       }
   }
   .el-col {
     border-radius: 4px;
     margin-left: 10px;
   }
   .el-button-group{
       float: right;
   }
   .top-btn{
      float: right;
      .el-button{
         margin-left: 5px;
      }
   }
   .right-btn{
       justify-content:center;
      .el-button{
         height: 22px;
         // width: 60px;
         margin-right: 10px;
         padding: 1px 5px;
      }
   }
   
   
.card-header {
//   display: flex;
  justify-content: f lex-start;
  align-items: center;
}

// 修改卡片头的样式
.el-card ::v-deep .el-card__header {
   border: 0px;
}
.text {
  font-size: 13px;
}

.item {
  margin-bottom: 18px;
  margin-left: 20px;
  color: #676a6c;
}
.el-card{
   border: 0px;
   box-shadow: none;
}
.c{
   color:#676a6c;
   font-size:21px;
   margin-top: 25px;
   
}
.div-title{
   border-bottom: 1px solid #e5e5e5;
   padding-bottom: 20px;
}
/deep/.el-dialog__body{
        padding: 0 1vw;
}
</style>